<template>
  <el-main height>
    <!-- Main content -->
    <el-form :model="searchForm" label-width="80px" :inline="true" size="small">
      <el-form-item label="">
        <el-input v-model="searchForm.searchName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button :icon="Search" @click="searchBtn">搜索</el-button>
        <el-button :icon="Plus" type="primary" @click="addBtn" v-permission="['sys:addDepartment']">新增</el-button>
      </el-form-item>
    </el-form>
    <div ref="ad">试一下ref值的获取</div>
    <!-- 表格 -->
    <el-table
      :data="tableData.list"
      style="width: 100%"
      row-key="id"
      size="default"
      default-expand-all
      border
      :tree-props="{ children: 'children' }"
    >
      <el-table-column prop="name" label="部门名称" />
      <el-table-column prop="deptCode" label="部门编码" />
      <el-table-column prop="deptPhone" label="部门电话" />
      <el-table-column label="操作" width="200" align="center">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            v-permission="['sys:editDept']"
            @click="editBtn(scope.row)"
            :icon="Edit"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            v-permission="['sys:deleteDept']"
            @click="deleteBtn(scope.row.id)"
            :icon="Close"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-main>
  <AddAndEditVue ref="addDeptRef" @save="saveBtn"></AddAndEditVue>
</template>
<script setup lang="ts">
/**
 * 注意看这里代码功能模块的划分
 * 首先所有的操作性代码都在composables/department目录下面
 * 这个目录结构和api，views目录结构一致，功能都是区分开来
 * 目录下面有根据模块划分的不同的操作文件，目前主页面涉及的文件不多
 * 只有两个，vue2中没有把js文件单独拿出来的必要，为了更方便的使用this
 * 但是3因为取消了this，就可以更加灵活的使用ts文件，这里也就出现了composables这个文件夹
 */
import { ref, reactive, onMounted } from 'vue'
import { Search, Plus, Edit, Close } from '@element-plus/icons-vue'
// 引入获取表格的数据，以及表格自身的数据，主要是查询用的form的数据和表格绑定的数据
// 就是引入了表单和表格的数据绑定
import useDeptTable from '@/composables/department/useDeptTable'
// 引入了表格的操作方法增删改查加，还有一个ref绑定值，就是自己的子组件的ref值
import useDept from '@/composables/department/useDept'
// 引入弹出框的组件
import AddAndEditVue from './AddAndEdit.vue'
// 获取页面中ref元素的方式,也可以直接这么写，但是要保证
// 这个声明的变量的名字和ref的自变量名字完全一致
const ad = ref(null)
onMounted(() => {
  console.log('至少这个函数触发了', ad.value)
})

// 表格列表
const { searchForm, tableData, getDeptList } = useDeptTable()
// table表格的操作时间，把获取表格数据的方法传递给useDept方法，用来进行增删之后的刷新
const { saveBtn, searchBtn, addBtn, editBtn, deleteBtn, addDeptRef } = useDept(
  getDeptList
)
</script>
<style scoped lang="scss"></style>
